﻿@model SmallJob.Model.Provide
@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var listCate = ViewData["AllCate"] as List<SmallJob.Model.Category>;
}
<div class="service-detail">
    <div class="service-detail-container">
        <div class="row-fluid">
            <div class="span8 service-detail-box main-column">
                <div class="inner">
                    <h1 class="muted text-center vn-modal-headline">Thông tin dịch vụ</h1>
                    @if (TempData["mess"] != null)
                    {
                        <div class="alert alert-success">
                            <h6>@TempData["mess"].ToString()</h6>
                        </div>
                    }
                    @using (Html.BeginForm("Save", "Provide", FormMethod.Post, new { Class = "form-horizontal", id = "form-service", name = "form", enctype = "multipart/form-data", onsubmit = "return validateform(this);" }))
                    {
                        @Html.Hidden("id", Model.ID)
                        <fieldset>
                            <div id="group-title" class="control-group">
                                <div class="controls service-add-input">
                                    <div class="input-prepend input-fullwidth">
                                        <span class="add-on">Tiêu đề</span>
                                        <div class="input-wrapper">
                                            <input name="title" class="input-large" value="@Model.Title" placeholder="Tiêu đề dịch vụ" type="text">
                                        </div>
                                    </div>
                                    <span class="help-inline"></span>
                                </div>
                            </div>
                            <div id="group-description" class="control-group">
                                <div class="controls service-add-input">
                                    <div class="input-prepend">
                                        <label>Mô tả dịch vụ</label>
                                        <textarea rows="6" style="width: 585px; height: 300px" name="description" id="area-des">@HttpUtility.HtmlDecode(Model.DescriptionOrder)</textarea>
                                    </div>
                                    <span class="help-inline"></span>
                                </div>
                            </div>
                            <div id="group-location" class="control-group">
                                <div class="controls service-add-input">
                                    <div class="input-prepend">
                                        <span class="add-on">Địa điểm</span>
                                        <select name="location">
                                            @foreach (var item in SmallShop.Services.Implements.UtilityService.GetCities())
                                            {
                                                if (Model.Location == item.Name)
                                                {
                                                <option selected="selected" value="@item.Name">@item.Name</option>
                                                }
                                                else
                                                {
                                                <option value="@item.Name">@item.Name</option>
                                                }
                                            }
                                        </select>
                                    </div>
                                    <span class="help-inline"></span>
                                </div>
                            </div>

                            <div id="group-price" class="control-group">
                                <div class="controls service-add-input">
                                    <div class="input-prepend">
                                        <span class="add-on">Danh mục</span>
                                        <select name="cateID">
                                            @foreach (var item in listCate)
                                            {
                                                if (Model.CategoryID == item.ID)
                                                {
                                                <option selected="selected" value="@item.ID">@item.Name</option>
                                                }
                                                else
                                                {
                                                <option value="@item.ID">@item.Name</option>
                                                }
                                            }
                                        </select>
                                    </div>
                                    <span class="help-inline"></span>
                                </div>
                            </div>
                            <div id="group-price" class="control-group">
                                <div class="controls service-add-input">
                                    <div class="input-prepend input-append">
                                        <span class="add-on">Giá</span>
                                        <input name="price" class="input-large" id="appendedPrependedInput" value="@(Model.Price / 1000)" type="text">
                                        <span class="add-on">&nbsp;.000 đ</span>
                                    </div>
                                    @*<div class="input-prepend">
	                                    <span class="add-on">Giá</span>
	                                    <input id="price"  class="input-xlarge" placeholder="Giá dịch vụ của bạn" type="text">
	                                    <span class="add-on">Nghìn</span>
	                                </div>*@
                                    <span class="help-inline"></span>
                                </div>
                            </div>
                            <div id="group-complete" class="control-group">
                                <div class="controls service-add-input">
                                    <div class="input-prepend input-append">
                                        <span class="add-on">Thời gian để hoàn thành</span>
                                        <input name="complete" class="input-large" id="" value="@(Model.TimeToComplete)" type="text">
                                        <span class="add-on">&nbsp;Ngày</span>
                                    </div>
                                    <span class="help-inline"></span>
                                </div>
                            </div>
                             <div id="group-delivery" class="control-group">
                                <div class="controls service-add-input">
                                    @if (Model.ID != null && Model.ID != 0 && !String.IsNullOrWhiteSpace(Model.Download))
                                    {
                                        <div class="input-prepend input-append">
                                            <label class="checkbox">
                                                <input type="checkbox" id="cbk-remove" name="deliveryimmediate" value="0" @(Model.IsDeliveryImmediate ? "checked" : "")>
                                                <label class="label label-info" for="radio-remove" title="bỏ đánh dấu để vô hiệu hóa giao hàng ngay.">Giao hàng ngay</label>
                                            </label>
                                        </div>
                                    }
                                    <div class="input-prepend input-append">
                                        <label class="checkbox">
                                            <input type="checkbox" id="provide-ckb-delivery" name="isdelivery" onchange="appendUpload();">
                                            <label title="upload tập tin hoặc up load tập tin mới" class="label label-info">@(string.IsNullOrWhiteSpace(Model.Download) ? "Giao hàng ngay" : "Đã có tập tin giao ngay")</label>
                                        </label>
                                    </div>
                                    <div class="upload-details" id="provide-upload-details" style="display: none;">
                                        <div id="provide-display-upload" class="btn btn-primary" onclick="calluploadbtn()">Select Your File </div>
                                        <div style="display: none;" class="btn btn-primary" onclick="removefile(this)">Remove </div>
                                        <input type="file" name="file" style="position: absolute; top: -100px;" id="provide-upload-btn" onchange="validatefile(this);" />
                                    </div>
                                    <span class="help-inline"></span>
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls service-add-input" id="append-file">
                                    <h4>Hình ảnh</h4>
                                    @if (!String.IsNullOrWhiteSpace(Model.ImagePath))
                                    {
                                        int i = 0;
                                        foreach (var item in Model.ImagePath.Split(';'))
                                        {
                                            if (!String.IsNullOrWhiteSpace(item))
                                            {
                                                string u = item + ".ashx";
                                        <div class="fileupload fileupload-exists" data-provides="fileupload" style="width: 210px">
                                            <span class="btn-close" id="close-file" onclick="closefile(this)">X</span>
                                            <input type="hidden" id="@i" value="@item" name ="oldImg"/>
                                            <div class="fileupload-preview thumbnail" style="width: 150px; height: 100px;">
                                                @* <img src="@((Model.Url).Replace(SmallJob.Services.Code.UserUtility.GetImageBannerUpload(), "/Upload/Banner/"))" />*@
                                                <img src="@u?w=150&h=100&q=90&format=jpg&mode=crop" />
                                            </div>
                                            <div>
                                                <span class="btn btn-file"><span class="fileupload-new">Chọn ảnh</span><span class="fileupload-exists">Đổi ảnh</span><input type="file" onchange="removehidden(@i)" name="imgs"></span>
                                                <a href="#" class="btn fileupload-exists" onclick="removehidden(@i)" id="remove-old" data-dismiss="fileupload">Xóa</a>
                                            </div>
                                        </div>
                                                i++;
                                            }
                                        }
                                    }
                                    <div class="fileupload fileupload-new" data-provides="fileupload" style="width: 210px">
                                        <div class="fileupload-new thumbnail" style="width: 150px; height: 100px;">
                                            <img src="http://www.placehold.it/150x100/EFEFEF/AAAAAA&text=no+image" />
                                        </div>
                                        <div class="fileupload-preview fileupload-exists thumbnail" style="width: 150px; height: 100px;"></div>
                                        <div>
                                            <span class="btn btn-file"><span class="fileupload-new">Chọn ảnh</span><span class="fileupload-exists">Đổi ảnh</span><input type="file" onchange="apd(this.value)" name="imgs" /></span>
                                            <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Xóa</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Button -->
                            <div class="control-group">
                                <div class="controls service-add-input">
                                    <button id="btn-post" type="submit" name="post" class="btn btn-primary">Đăng dịch vụ</button>
                                </div>
                            </div>
                        </fieldset>
                    }
                </div>
            </div>
            <div class="span4 sidebar">
                <!-- <div class="service-detail-box sidebar-block texture" id="service-detail-sideinfo">
                    <div class="inner">
                        <div class="quantity-price">@Model.Price đ</div>
                        <div class="place-order">
                            <button class="btn btn-large btn-success" type="button"><i class="icon-shopping-cart icon-white"></i>&nbsp;Đặt dịch vụ</button>
                        </div>
                    </div>
                </div> -->
                <div class="service-detail-box sidebar-block" id="service-detail-creator">
                    <!-- <div class="container-header">
                        Người đăng dịch vụ
                    </div>
                    <div class="user-avatar">
                        <img src="/Content/img/blank-avatar.jpg" />
                    </div>
                    <h4 class="text-center"><a href="">Đức NT</a></h4> -->
                    <div class="container-header">
                        Hướng dẫn đăng dịch vụ
                    </div>
                    <div class="service-help">
                        <ul>
                            <li>Tiêu đề và mô tả rõ ràng, chi tiết.</li>
                            <li>Giá dịch vụ hợp lý.</li>
                            <li>Ảnh minh họa chân thật.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/ecmascript">
    function apd(data) {
        if (data.length > 0) {
            $('#append-file').append('   <div class="fileupload fileupload-new" data-provides="fileupload" style="width:210px"><span class="btn-close" id="close-file" onclick="closefile(this)">X</span>'
									+ '<div class="fileupload-new thumbnail" style="width: 150px; height: 100px;"><img src="http://www.placehold.it/150x100/EFEFEF/AAAAAA&text=no+image" /></div>'
                                     + '<div class="fileupload-preview fileupload-exists thumbnail" style="width: 150px; height: 100px;"></div>'
                                     + '<div>'
                                     + '<span class="btn btn-file"><span class="fileupload-new">Chọn ảnh</span><span class="fileupload-exists">Đổi ảnh</span><input type="file" onchange="apd(this.value)" name="imgs"/></span>'
                                     + '<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Xóa</a>'
                                     + '</div>'
                                     + '</div>');
        }
    }
    function closefile(span) {
        $(span).parent().remove();
    }
    function removehidden(id) {
        $('#' + id).remove();
    }
    $(document).ready(function () {
        $('#area-des').wysihtml5({
            "font-styles": false
        });
    });
    $('#btn-post').click(function (e) {
        $('input[name=imgs]').each(function () {
            if ($(this).val().length == 0) {
                $(this).remove();
            }
        });
    });
    function calluploadbtn() {
        $('#provide-upload-btn').click();
    }
    function appendUpload() {
        var cb = $('#provide-ckb-delivery');
        if ($(cb).is(':checked')) {
            $('#provide-upload-details').show();
        } else {
            $('#provide-upload-details').hide();
        }
    }
    function validateform(that) {
        var file = $(that).find('input[name=file]').val();
        if ($(that).find('input[name=isdelivery]').is(':checked')) {

            if (!file) {
                alert("Bạn cần tải lên 1 tập tin cho kết quả.");
                return false;
            }
        } else {
            if (file) {
                $(that).find('input[name=file]').replaceWith($(that).find('input[name=file]').clone(true));
            }
        }
    }
    function validatefile(that) {
        var file = $(that).val();
        var patt = /\.(rar|zip)$/i;
        if (!patt.test(file)) {
            alert("Chỉ gửi lên tập tin rar hoặc zip.");
            $(that).replaceWith($(that).clone(true));
        } else {
            if (showFileSize(that, 200 * 1024 * 1024)) {
                var removebtn = $(that).prev('.btn');
                $(removebtn).show();
                if ($(that).next('span').remove()) {
                    $(that).after("<span>" + file.split('\\').pop() + "</span>");
                }
            }
        }
    }
    function removefile(that) {
        var filesinput = $(that).siblings('input[type=file]');
        var filename = $(filesinput).next('span');
        $(filesinput).replaceWith($(filesinput).clone(true));
        filename.remove();
        $(that).hide();
    }
    function showFileSize(that, size) {
        var input, file;

        // (Can't use `typeof FileReader === "function"` because apparently
        // it comes back as "object" on some browsers. So just see if it's there
        // at all.)
        if (!window.FileReader) {
            //alert('not support');
            return true;
        }

        input = $(that)[0];
        if (!input) {
            //alert("Um, couldn't find the fileinput element.");
            return true;
        }
        else if (!input.files) {
            //alert("This browser doesn't seem to support the `files` property of file inputs.");
            return true;
        }
        else if (!input.files[0]) {
            //alert("Please select a file before clicking 'Load'");
            return true;
        }
        else {
            file = input.files[0];
            //alert("File " + file.name + " is " + file.size + " bytes in size");
            if (file.size > size) {
                alert("Dung lượng của file vượt quá dung lượng cho phép.");
                return false;
            } else {
                return true;
            }
        }
    }
</script>

